import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers/box_provider.dart';
import '../widgets/adaptive_grid.dart';
import '../routes/app_router.dart';

@RoutePage()
class HomeScreen extends ConsumerWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final boxCount = ref.watch(boxCountProvider);
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('自适应网格布局'),
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => ref.read(boxCountProvider.notifier).decrement(),
                  child: const Icon(Icons.remove),
                  style: ElevatedButton.styleFrom(
                    shape: const CircleBorder(),
                    padding: const EdgeInsets.all(16),
                    backgroundColor: Colors.blue,
                  ),
                ),
                const SizedBox(width: 24),
                Text(
                  '$boxCount',
                  style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                const SizedBox(width: 24),
                ElevatedButton(
                  onPressed: () => ref.read(boxCountProvider.notifier).increment(),
                  child: const Icon(Icons.add),
                  style: ElevatedButton.styleFrom(
                    shape: const CircleBorder(),
                    padding: const EdgeInsets.all(16),
                    backgroundColor: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
          
          // 网格区域
          Expanded(
            child: Container(
              color: Colors.green[100],
              padding: const EdgeInsets.all(16.0),
              child: AdaptiveGrid(
                itemCount: boxCount,
                onItemTap: (index) {
                  context.router.push(DetailRoute(boxIndex: index));
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
} 